<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 546px;
    margin-bottom: 16px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

  .flex-form .title {
    width: 100%;
    padding-left: 16px;
  }

  .dialog-form>div {
    margin-bottom: 8px;
  }

  .error-table {
    border: 1px solid #f56c6c;
  }

  .show-error {
    display: block;
    width: 100%;
    color: #f56c6c;
    margin-left: 16px;
  }

</style>
<style>
  .flex-form .upload-file.full {
    width: 100%;
  }

</style>
<template>
  <div class="tab_content">
    <div :class="(readonly?'read-only-form':'') + ' finance-class flex-form'">
      <div class="title">车辆资源
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="formShow = true;resetForm('ruleForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="dataList" border style="margin: 0 16px 16px 16px" :class="{'error-table' : isError}">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteList(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="" v-if="isshow" prop="id"></el-table-column>
        <el-table-column label="自有车车牌号" prop="carNo"></el-table-column>
        <el-table-column label="行驶证" prop="drivingLicenseNo"></el-table-column>
        <el-table-column label="车辆登记号" prop="carRegisterNo"></el-table-column>
        <el-table-column label="附件">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row.carInfoFileUrl, scope.row.carInfoFileName)">{{scope.row.carInfoFileName}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="isError" style="margin-bottom:16px" :class="{'show-error': isError}">请添加车辆资源</div>
      <!--添加产品-->
      <dialog-ext title="新增" v-model="formShow" @submitForm="submitForm" @resetDialog="resetForm('ruleForm')" width="800px">
        <el-form :model="form" ref="ruleForm" label-width="140px" class="dialog-form">
          <el-form-item label="" v-if="isshow" prop="id">
            <el-input v-model="id"></el-input>
          </el-form-item>
          <el-form-item label="自有车车牌号" prop="carNo">
            <el-input v-model="form.carNo"></el-input>
          </el-form-item>
          <el-form-item label="行驶证" prop="drivingLicenseNo">
            <el-input v-model="form.drivingLicenseNo"></el-input>
          </el-form-item>
          <el-form-item label="车辆登记号" prop="carRegisterNo">
            <el-input v-model="form.carRegisterNo"></el-input>
          </el-form-item>
          <el-form-item label="上传附件">
            <el-upload class="upload-file full" name="carInfoFile" :action="this.lib.config.host.vendorMgt + '/vendormgt/questionary/car/uploadCarFile'"
              multiple :limit="1" :auto-upload="true" :on-success="uploadFileSuccess" :data="{carInfoFileUrl: '', carInfoFileName:''}">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </dialog-ext>
    </div>
  </div>
</template>
<script>
  import DialogExt from '../../../common/dialog-ext/dialog-ext';
  export default {
    data() {
      return {
        isshow: false,
        form: {
          id: '',
          carNo: '',
          drivingLicenseNo: '',
          carRegisterNo: '',
          carInfoFileName: '',
          carInfoFileUrl: ''
        },
        formShow: false,
        dataList: [],
        isError: false
      }
    },
    components: {
      DialogExt
    },
    created() {},
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      initData(vendorId) {
        let _this = this;
        this.axios.post(this.lib.config.host.vendorMgt + '/vendormgt/questionary/car/query/' + vendorId).then((res) => {
          if (res.data.resultMap.vdCarInfoList instanceof Array && res.data.resultMap.vdCarInfoList.length > 0) {
            _this.dataList = [];
            res.data.resultMap.vdCarInfoList.forEach((item) => {
              let tempData = {};
              for (let key in _this.form) {
                if (item[key]) {
                  tempData[key] = item[key];
                }
              }
              _this.dataList.push(tempData);
            });
          }
        });
      },
      // downloadFile(url, filename) {
      //   downloadUtil.download(this.lib.config.host.vendorMgt + url, filename, {});
      // },
      uploadFileSuccess(response, file, fileList) {
        this.form.id = response.resultMap.id;
        this.form.carInfoFileName = response.resultMap.carInfoFileName;
        this.form.carInfoFileUrl = response.resultMap.carInfoFileUrl;
      },
      deleteList(index) {
        this.dataList.splice(index, 1);
        this.checkList();
      },
      submitForm(callBack) {
        this.dataList.push(JSON.parse(JSON.stringify(this.form)));
        this.resetForm('ruleForm');
        this.checkList();
        callBack(true);
      },
      resetForm(ref) {
        if (this.$refs[ref]) {
          this.$refs[ref].resetFields();
          this.form.carInfoFileName = '';
          this.form.carInfoFileUrl = '';
          this.form.id = '';
        }
      },
      getData(isCheck) {
        return new Promise((resolve, reject) => {
          resolve({
            data: {
              vdCarInfoJsonStr: JSON.stringify(this.dataList)
            },
            check: isCheck ? this.checkList() : true
          });
        });
      },
      checkList() {
        let flag = true;
        if (this.dataList.length === 0) {
          this.isError = true;
          flag = false;
        } else {
          this.isError = false;
        }
        return flag;
      }
    }
  }

</script>
